﻿@model IEnumerable<TopArtMVC.Models.PostView>

@{
    ViewBag.Title = "PostView";
}

<h2>PostView</h2>@foreach (var item in Model)
{

    <div class="divPostRow">
        <div class="divPost">
            <img class="postImg" src="~/Images/ladyinred.jpeg" />

            <div class="divPostInfo">
                Post of:@Html.ActionLink(item.UserName, "Search", new { search = item.UserName, searchType = "UserName" })<br />
                <h1>@Html.DisplayFor(modelItem => item.Title)</h1> <br />
                Artist: @Html.ActionLink(item.Artist, "Search", new { search = item.Artist, searchType = "Artist" })<br />
                Genre:@Html.ActionLink(item.Genre, "Search", new { search = item.Genre, searchType = "Genre" })<br />
                Album: @Html.ActionLink(item.Album, "Search", new { search = item.Album, searchType = "Album" })<br />
                Relesed on:@Html.DisplayFor(modelItem => item.ReleseDate.Date.Year)<br />

            </div>
        </div>
        <div class="divRating">
            @Html.Partial("_Rating", item)
            <br />@item.AvgStars from: @item.TotalStars votes
        </div>
        <div class="divSocialInfo">
            <div class="divYoutube">
                <div class="g-ytsubcribe" data-channel=@item.YoutubeChannel data-layout="default" data-count="default"></div>
            </div>
            <div class="divFacebook">
                <div class="fb-like" data-href=@item.FacebookLink data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
            </div>
            <div class="divTwetter">
                <a class="twitter-share-button" href=@item.TwitterLink data-via="Notepad_plus">Tweet</a>
            </div>
            <div class="divGoogle">
                <div class="g-plusone"></div>
            </div>

        </div>
        <div class="divHiddenDetail">
            ★ ★ ★ ★ ★ : @item.FiveStars
            <br />★ ★ ★ ★ : @item.FourStars

            <br />★ ★ ★ : @item.ThreeStars

            <br />★ ★ : @item.TwoStars

            <br />★ : @item.OneStars
            <br />



            @Html.ActionLink("Edit", "Edit", new { id = item.Post_ID }) |
            @Html.ActionLink("Details", "Details", new { id = item.Post_ID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.Post_ID })


        </div>
        <div class="divExpandDetail">⇊⇓⇊</div>
    </div>


}

@section header {
    <link href="@Url.Content("~/Content/rating.css")" rel="stylesheet" />
}
@section scripts {
    <script src="@Url.Content("~/Scripts/rating.js")"></script>
    <script>

        $(function () {

            //tabs: http://twitter.github.com/bootstrap/javascript.html#tabs
            $('#myTab a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
            })

            // ratting system: https://github.com/irfan/jquery-star-rating



            $('.ratting-item').rating(function (vote, event) {

                var anchor = $(event.currentTarget),
                    pid = anchor.closest(".ratting-item").data("pid"),
                    url = '@Url.Action("AddRating", "Song")';

                // show message while doing the database round trip


                $.ajax({
                    url: url,
                    type: "GET",
                    data: { rate: vote, id: pid },
                    success: function (data) {

                        if (data.success) {
                            // all went well, here you can say Thank you
                            $('.ratting-item[data-pid=' + data.pid + ']')
                                .next()
                                .text("You have rated " + data.rate+" stars");
                        }
                        else {
                            // There must be an Exception error, let's show it
                            $('.ratting-item[data-pid=' + data.pid + ']')
                                .next()
                                .text("Something went wrong...");
                        }
                    },
                    error: function (err) {
                        // the call thrown an error
                        $('.result').text(err);
                    },
                    complete: function () {
                        //$(".loading").hide();
                    }
                });
            });

        });
    </script>

}
